<template>
	<view>
		<view class="page">
			<view class="example-body">
				<uni-nav-bar background-color="#003466" color="#ffffff" :status-bar="true" @click-left="back" left-icon="arrowleft" style="position: relative;">
					<view class="flex-item">我来接班</view>
				</uni-nav-bar>
			</view>
			<view>
				<view class="turn-content">
					<navigator class="content-detail" url="wind_team">
						<view class="content-pic">
							<image src="../../../static/images/flow.png" mode=""></image>
						</view>
						<view class="content-words">风专业队</view>
						<view class="content-right">
							<image src="../../../static/images/righticon.png" mode=""></image>
						</view>
						<view class="detail-right">
							<uni-badge :text="windPerson" type="error" />
						</view>
					</navigator>
					<navigator class="content-detail" url="water_team">
						<view class="content-pic">
							<image src="../../../static/images/water.png" mode=""></image>
						</view>
						<view class="content-words">水专业队</view>
						<view class="content-right">
							<image src="../../../static/images/righticon.png" mode=""></image>
						</view>
						<view class="detail-right">
							<uni-badge :text="waterPerson" type="error" />
						</view>
					</navigator>
					<navigator class="content-detail" url="electricity_team">
						<view class="content-pic">
							<image src="../../../static/images/cable.png" mode=""></image>
						</view>
						<view class="content-words">电专业队</view>
						<view class="content-right">
							<image src="../../../static/images/righticon.png" mode=""></image>
						</view>
						<view class="detail-right">
							<uni-badge :text="electricityPerson" type="error" />
						</view>
					</navigator>
					<navigator class="content-detail" url="soil_team">
						<view class="content-pic">
							<image src="../../../static/images/build.png" mode=""></image>
						</view>
						<view class="content-words">土建专业队</view>
						<view class="content-right">
							<image src="../../../static/images/righticon.png" mode=""></image>
						</view>
						<view class="detail-right">
							<uni-badge :text="soilPerson" type="error" />
						</view>
					</navigator>
					<view class="content-detail">
						<view class="content-pic">
							<image src="../../../static/images/move.png" mode=""></image>
						</view>
						<view class="content-words">添加账号</view>
						<view class="content-right">
							<image src="../../../static/images/righticon.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="return-this">退出当前账号</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import uniIcon from '@/components/uni-icon/uni-icon.vue';
	export default {
		components:{
			uniBadge,
			uniNavBar,
			uniIcon
		},
		data() {
			return {
				windPerson:0,
				electricityPerson:0,
				waterPerson:0,
				soilPerson:0
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getPersonNum(){
				this.windPerson = uni.getStorageSync('windPerson');
				this.electricityPerson = uni.getStorageSync('electricityPerson');
				this.waterPerson = uni.getStorageSync('waterPerson');
				this.soilPerson = uni.getStorageSync('soilPerson');
			}
		},
		onLoad:function() {
			
		},
		onShow() {
			this.getPersonNum();
		}
	}
</script>

<style>
	.turn-content {
		width: 94%;
		background-color: #FFFFFF;
		margin: 0 auto;
		margin-top: 10px;
		overflow: hidden;
		border-radius: 3px;
	}
	
	.turn-content .content-detail {
		width: 94%;
		border-bottom: 1px solid #E5E5E5;
		margin: 0 auto;
		position: relative;
		padding: 33px 14px;
	}
	
	.content-detail .content-pic {
		width: 36px;
		height: 36px;
		position: absolute;
		top: 15px;
		left: 10px;
	}
	
	.content-detail .content-pic image {
		max-width: 100%;
		max-height: 100%;
	}
	
	.content-detail .content-words {
		font-size: 16px;
		color: #666666;
		position: absolute;
		left: 60px;
		top: 22px;
	}
	
	.content-detail .content-right {
		width: 7px;
		height: 11px;
		position: absolute;
		top: 28px;
		right: 14px;
	}
	
	.content-detail .content-right image {
		max-width: 100%;
		max-height: 100%;
	}
	
	.content-detail .detail-right {
		width: 17px;
		height: 13px;
		color: #FFFFFF;
		font-size: 11px;
		text-align: center;
		line-height: 13px;
		position: absolute;
		right: 36px;
		top: 38%;
	}
	
	.uni-badge{
		padding: 2px 8px;
		float: right;
	}
	
	.uni-badge-error{
		background-color: #FF6C68;
	}
	
	.page .return-this {
		width: 94%;
		height: 52px;
		border: 1px solid #458CD0;
		border-radius: 3px;
		text-align: center;
		line-height: 52px;
		margin: 0 auto;
		margin-top: 80px;
		font-size: 16px;
		color: #458CD0;
	}
	
	image{
		display: inherit;
	}
	
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #efeff4;
	}
	
	.flex-item {
		font-size: 20px;
		text-align: center;
	}
	
	.uni-icon {
		padding-left: 42%;
	}
	
	.uni-navbar__header-btns:last-child {
		width: 120px;
	}
	
	.uni-navbar__header-btns {
		padding: 0;
	}
	
</style>
